<template>
    <div>
        <mt-header fixed title="宠物领养" style="background:#f49b00">
            <router-link to="" slot="left">
                <mt-button icon="back" @click="$router.go(-1)"></mt-button>
            </router-link>
            <!-- <mt-button icon="more" slot="right"></mt-button> -->
        </mt-header>
        <div style="height: 40px"></div>

        
        <div>
            <van-image
                width="100%"
                radius="0px 0px 20px 20px"
                :src="`${adpet.pic}`"
            />
            <h2 style="margin-left: 15px">{{adpet.petName}}</h2>
            <!-- 分割线 -->
            <van-divider /> 
            <van-cell-group inset>
                <van-cell title="种类" :value="adpet.type" />
                <van-cell title="生日" :value="time(adpet.birthday)" />
                <van-cell title="性格" :value="adpet.character" />
            </van-cell-group>
            <van-goods-action>
                <van-goods-action-icon icon="like-o" text="喜欢" />
                <van-goods-action-button color="#f49b00" type="warning" text="点击领养" @click="adopt" />
            </van-goods-action>
            
        </div>
        <div style="height:10vh"></div>
    </div>
</template>

<script>
import { Dialog } from 'vant';
import { Toast } from 'vant';
    export default {
        // 局部注册
        components: {
            [Dialog.Component.name]: Dialog.Component,
        },

        props:['apid'],
        data() {
            return {
                adpet: [],
            }
        },
        mounted(){
            this.getdata()
        },
        methods: {
            // 发送请求，获得宠物详情页数据
            getdata() {
                this.axios.get(`/adopt/details?apid=${this.$route.query.apid}`).then(res=>{
                    console.log(res);
                    this.adpet = res.data.data[0]
                })
            },
            // 点击领养产生弹窗
            adopt(){
                if(this.$store.state.uid){
                    Dialog.confirm({
                        title: '是否领养',
                        message: '您是否领养该宠物,请仔细阅读以下协议!<br><a href="http://localhost:8080/xieyi">领养宠物协议</a>',
                        
                    })
                    .then(() => {
                        // on confirm
                        // 发送请求，获得宠物是否被领养
                        let apid = this.$route.query.apid
                        let uid = this.$store.state.uid
                        let params = {"uid":uid,"apid":apid}
                            this.axios.post('/adopt/apply',params).then(res=>{
                             console.log(res);
                             if(res.data.code==201){
                                Toast({
                                    message: '已被领养！',
                                    position: 'bottom',
                                });
                             }else if(res.data.code==200){
                                Toast.success('领养成功！');
                             }else if(res.code==400){
                                Toast.fail('领养失败!');
                             }
                        })
    
                    })
                    .catch(() => {
                        // on cancel
                    });
                }else{
                    Toast("未登录")
                }
            },
            // 转换时间函数
            time(birthday) {
                birthday = this.dayjs(birthday).format("YYYY-MM-DD");
                return birthday
            }
        },
    }
</script>

<style lang="scss" scoped>
.van-nav-bar{
    background-color: #f49b00;
}
div{
    background-color: #fcfcfc;
}

::v-deep .mint-header-title{
  font-size: 15px;
}
</style>